单元测试可以保证代码质量,我们写完代码实现了功能之后,要书写对应功能点的单测,这样有很多好处:
- 单测就是文档,可以根据单测了解插件的功能
- 代码改动跑一下单测就知道功能是否正常,快速回归测试,方便后续迭代
那 babel 插件应该怎样做单测?
# babel 插件单元测试的方式
babel 插件做的事情就是对 AST 做转换,那么我们很容易可以想到几种测试的方式:
- 测试转换后的 AST,是否符合预期
- 测试转换后生成的代码,是否符合预期(如果代码比较多,可以存成快照,进行快照对比)
- 转换后的代码执行一下,测试是否符合预期
分别对应的代码(使用 jest):
# AST测试
it('包含guang', () => {
const {ast} = babel.transform(input, {plugins: [plugin]});
const program = ast.program;
const declaration = program.body[0].declarations[0];
assert.equal(declaration.id.name, 'guang');// 判断 AST 节点的值
});
@前端进阶之旅: 代码已经复制到剪贴板
# 生成代码的快照测试
it('works', () => {
const {code} = babel.transform(input, {plugins: [plugin]});
expect(code).toMatchSnapshot();
});
@前端进阶之旅: 代码已经复制到剪贴板
# 执行测试
it('替换baz为foo', () => {
var input = `
var foo = 'guang';
// 把baz重命名为foo
var res = baz;
`;
var {code} = babel.transform(input, {plugins: [plugin]});
var f = new Function(`
${code};
return res;
`);
var res = f();
assert(res === 'guang', 'res is guang');
});
@前端进阶之旅: 代码已经复制到剪贴板
这三种方式都可以,一般还是第二种方式用的比较多,babel 也是封装了这种方式,提供了 babel-plugin-tester 包。
